<template>
  <div class="dashboard">
    <h1>系统概览</h1>

    <div class="stats-grid">
      <!-- 统计卡片 -->
      <div class="stat-card">
        <div class="stat-title">活跃提醒</div>
        <div class="stat-value">{{ activeAlertsCount }}</div>
        <div class="stat-desc">个有效的定时提醒</div>
      </div>

      <div class="stat-card">
        <div class="stat-title">在线客户端</div>
        <div class="stat-value">{{ onlineClientsCount }}</div>
        <div class="stat-desc">个当前连接的客户端</div>
      </div>

      <div class="stat-card">
        <div class="stat-title">总客户端</div>
        <div class="stat-value">{{ totalClientsCount }}</div>
        <div class="stat-desc">个已注册的客户端</div>
      </div>

      <div class="stat-card">
        <div class="stat-title">今日提醒</div>
        <div class="stat-value">{{ todayAlertsCount }}</div>
        <div class="stat-desc">个今日触发的提醒</div>
      </div>
    </div>

    <div class="recent-activity">
      <h2>最近活动</h2>
      <div class="activity-list">
        <div v-for="activity in recentActivities" :key="activity.id" class="activity-item">
          <div class="activity-time">{{ formatTime(activity.time) }}</div>
          <div class="activity-content">{{ activity.content }}</div>
        </div>
        <div v-if="recentActivities.length === 0" class="no-activity">暂无活动记录</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000'

// 统计数据
const activeAlertsCount = ref(0)
const onlineClientsCount = ref(0)
const totalClientsCount = ref(0)
const todayAlertsCount = ref(0)
const recentActivities = ref([])

// 格式化时间
const formatTime = (timeString) => {
  const date = new Date(timeString)
  return date.toLocaleString()
}

// 获取统计数据
const fetchStats = async () => {
  try {
    // 获取提醒统计
    const alertsResponse = await axios.get(`${API_BASE_URL}/api/alerts?active=true`)
    activeAlertsCount.value = alertsResponse.data.length

    // 获取客户端统计
    const clientsResponse = await axios.get(`${API_BASE_URL}/api/clients`)
    totalClientsCount.value = clientsResponse.data.length
    onlineClientsCount.value = clientsResponse.data.filter(c => c.is_online).length

    // 模拟今日提醒数据
    todayAlertsCount.value = Math.floor(Math.random() * 5)

    // 模拟最近活动数据
    recentActivities.value = [
      {
        id: 1,
        time: new Date(Date.now() - 30 * 60000).toISOString(),
        content: `客户端 "MacBook-Pro" 上线`
      },
      {
        id: 2,
        time: new Date(Date.now() - 60 * 60000).toISOString(),
        content: `提醒 "会议通知" 已触发`
      },
      {
        id: 3,
        time: new Date(Date.now() - 120 * 60000).toISOString(),
        content: `管理员新增了提醒 "项目截止日期"`
      }
    ]
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

// 页面加载时获取数据
onMounted(() => {
  fetchStats()
  // 每30秒刷新一次数据
  setInterval(fetchStats, 30000)
})
</script>

<style scoped>
.dashboard {
  max-width: 1200px;
  margin: 0 auto;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.stat-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-title {
  color: #7f8c8d;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 2rem;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 5px;
}

.stat-desc {
  color: #7f8c8d;
  font-size: 0.8rem;
}

.recent-activity {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.activity-list {
  margin-top: 15px;
}

.activity-item {
  padding: 12px 0;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  gap: 15px;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-time {
  color: #7f8c8d;
  font-size: 0.8rem;
  min-width: 150px;
}

.activity-content {
  flex: 1;
}

.no-activity {
  color: #7f8c8d;
  text-align: center;
  padding: 20px;
}
</style>
